<template>
  <div class="app">
    <div id="printArea">
      <div class="titleipt">
        <h2 class="titleh">{{ title }}信息汇总表</h2>
      </div>
      <div class="titleipt" id="titlemessage">
        <h4 class="titleh">团队基本信息</h4>
      </div>
      <div class="flex">
        <el-input v-model="team.teamname" :readonly="true">
          <template slot="prepend">团队名称</template>
        </el-input>

        <el-input v-model="team.teamabbreviation" :readonly="true">
          <template slot="prepend">团队简称</template>
        </el-input>
      </div>

      <el-input v-model="team.address" :readonly="true">
        <template slot="prepend">详细地址</template>
      </el-input>

      <div class="flex">
        <el-input v-model="team.teamleader" :readonly="true">
          <template slot="prepend">团队负责人</template>
        </el-input>

        <el-input v-model="team.phone" :readonly="true">
          <template slot="prepend">联系电话</template>
        </el-input>

        <el-input v-model="team.email" :readonly="true">
          <template slot="prepend">电子邮件</template>
        </el-input>
      </div>

      <el-input v-model="lingdui" :readonly="true">
        <template slot="prepend">领队</template>
      </el-input>

      <el-input v-model="judge" :readonly="true">
        <template slot="prepend">裁判</template>
      </el-input>

      <el-input v-model="follower" :readonly="true">
        <template slot="prepend">随队人员</template>
      </el-input>

      <!-- 人员信息 -->
      <el-table
        :data="staff"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="id" label="运动员号" width="180">
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="statusname" label="身份"> </el-table-column>

        <el-table-column prop="idcard" label="证件号码"> </el-table-column>
        <el-table-column prop="birthday" label="出生年月"> </el-table-column>
        <el-table-column prop="sex" label="性别"> </el-table-column>
        <el-table-column prop="phone" label="手机号码"> </el-table-column>

        <el-table-column prop="csgroup" label="参赛组别"> </el-table-column>

        <el-table-column prop="danbk" label="考段信息"> </el-table-column>
        <el-table-column prop="souvenir" label="纪念品"> </el-table-column>
      </el-table>

      <!-- 单练 -->
      <div class="titleipt" id="titlemessage">
        <h4 class="titleh">单练项目报名信息</h4>
      </div>
      <el-table
        :data="project"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="id" label="报名序号" width="180">
        </el-table-column>
        <el-table-column prop="participant" label="姓名" width="180">
        </el-table-column>

        <el-table-column prop="csgroup" label="参赛组别"> </el-table-column>

        <el-table-column prop="projectid" label="项目号"> </el-table-column>
        <el-table-column prop="projectname" label="项目名"> </el-table-column>
        <el-table-column prop="routinename" label="套路名"> </el-table-column>
      </el-table>

      <!-- 对练 -->
      <div class="titleipt" id="titlemessage">
        <h4 class="titleh">对练项目报名信息</h4>
      </div>
      <el-table style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="报名序号" width="180">
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="180">
        </el-table-column>

        <el-table-column prop="group" label="参赛组别"> </el-table-column>

        <el-table-column prop="projectid" label="项目号"> </el-table-column>
        <el-table-column prop="projectname" label="项目名"> </el-table-column>
        <el-table-column prop="routinename" label="套路名"> </el-table-column>
      </el-table>

      <!-- 集体 -->
      <div class="titleipt" id="titlemessage">
        <h4 class="titleh">集体项目报名信息</h4>
      </div>
      <el-table style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="报名序号" width="180">
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="180">
        </el-table-column>

        <el-table-column prop="group" label="参赛组别"> </el-table-column>

        <el-table-column prop="projectid" label="项目号"> </el-table-column>
        <el-table-column prop="projectname" label="项目名"> </el-table-column>
        <el-table-column prop="routinename" label="套路名"> </el-table-column>
      </el-table>

      <!-- 对抗 -->
      <div class="titleipt" id="titlemessage">
        <h4 class="titleh">对抗项目报名信息</h4>
      </div>
      <el-table style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="报名序号" width="180">
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="180">
        </el-table-column>

        <el-table-column prop="group" label="参赛组别"> </el-table-column>

        <el-table-column prop="projectid" label="项目号"> </el-table-column>
        <el-table-column prop="projectname" label="项目名"> </el-table-column>
        <el-table-column prop="routinename" label="套路名"> </el-table-column>
      </el-table>

      <!-- 对抗展示 -->
      <div class="titleipt" id="titlemessage">
        <h4 class="titleh">对抗展示项目报名信息</h4>
      </div>
      <el-table style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="报名序号" width="180">
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="180">
        </el-table-column>

        <el-table-column prop="csgroup" label="参赛组别"> </el-table-column>

        <el-table-column prop="projectid" label="项目号"> </el-table-column>
        <el-table-column prop="projectname" label="项目名"> </el-table-column>
        <el-table-column prop="routinename" label="套路名"> </el-table-column>
      </el-table>

      <i class="fa fa-camera-retro fa-lg"></i>
    </div>
    <div class="btn">
      <el-button type="primary" v-print="'#printArea'">打印</el-button>
      <el-button type="warning">关闭</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  printInfoObj: {
    id: "printInfo",
    popTitle: "租赁合同",
    priview: false,
    beforOpenCallback: () => {
      console.log("开始打印之前的callback");
    },
  },
  name: "PrintInvoice",
  data: function () {
    return {
      tableData: [],
      input1: "天下武林",
      lingdui: "领队1",
      judge: "裁判1",
      follower: "随队人员",

      team: "", // 团队信息
      staff: [], // 人员列表
      project: [], // 单练
      pair: "", // 对练
      title: "", // 标题
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      let a = row;
      // console.log(a);
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },

    getmessage() {
      axios({
        method: "post",
        url: "http://localhost:3002/competition/staff/list",
        data: {},
      }).then((res) => {
        // console.log(res.data);
        this.staff = res.data.list;
      });

      axios({
        method: "post",
        url: "http://localhost:3002/competition/project/list",
        data: {},
      }).then((res) => {
        // console.log(res.data);
        this.project = res.data.list;
      });
    },

    gettitle() {
      const storedData = localStorage.getItem("title");
      const teaminfo = localStorage.getItem("teaminfo");

      if (storedData || teaminfo) {
        const userData = JSON.parse(storedData);
        const teamData = JSON.parse(teaminfo);

        this.title = userData.title;
        this.team = teamData;
      }
    },
  },

  mounted() {
    this.getmessage();
    this.gettitle();
  },
};
</script>
<style  lang="less" scoped>
.app {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
}
.el-table .warning-row {
  background: oldlace !important;
}

.el-table .success-row {
  background: #f0f9eb !important;
}

.flex {
  display: flex;
}

.btn {
  text-align: center;
}

.titleipt {
  text-align: center;
}
.titleh {
  display: inline-block;
  font-size: 14px !important;
}

#titlemessage {
  border: 1px solid #dcdfe6;
  height: 40px !important;
  line-height: 1px;
}
/deep/ .el-input-group__prepend {
  color: black;
}

/deep/ .cell {
  color: black;
}
</style>
